<template>
  <div class="wrapper"
       v-loading="resumeUpdateLoading"
       ref="print_area">
    <div class="personal-info">
      <div class="avatar-wrapper">
        <el-upload class="avatar-uploader"
                   action="https://jsonplaceholder.typicode.com/posts/"
                   :show-file-list="false"
                   v-loading="avatarUploading"
                   :on-progress="handleAvatarProgressing"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="primary-info">
        <div class="name">{{primaryInfo.name}}</div>
        <div v-if="preferenceItems.isShow && preferenceItems.isShowInPrimaryIfo"
             class="others">
          <span>求职意向：</span>
          <span>{{preferenceItems.content.intendedPosition}} | </span>
          <span>{{preferenceItems.content.intendedCity}} | </span>
          <span>{{preferenceItems.content.intendedSalary}}</span>
        </div>
        <div v-else
             class="introduction">{{primaryInfo.introduction}}</div>
        <div class="others">
          <span>{{primaryInfo.age}}岁 | </span>
          <span>{{primaryInfo.yearOfWork}}年工作经验 | </span>
          <span>{{primaryInfo.phone}} | </span>
          <span>{{primaryInfo.email}}</span>
        </div>
      </div>
    </div>
    <div class="detail">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in showItems"
                          :key="index"
                          color="#254665"
                          :icon="item.icon"
                          :timestamp="item.timestamp"
                          size="large"
                          placement="top">
          <el-card>

            <!-- 求职意向渲染区域 -->
            <div v-if="item.itemName === 'preference'"
                 class="preference">
              <span>{{item.content.intendedPosition}} | </span>
              <span>{{item.content.intendedCity}} | </span>
              <span>{{item.content.intendedSalary}} | </span>
              <span>入职时间：{{item.content.entryTime}}</span>
            </div>

            <!-- 教育背景渲染区域 -->
            <div v-if="item.itemName === 'education'"
                 class="education">
              <div v-for="(edu,index) in item.content"
                   :key=index
                   class="detail-item">
                <div class="info-header">
                  <span class="time">
                    {{edu.studyTime[0]}} 至 {{edu.studyTime[1]}}
                  </span>
                  <span class="location">{{edu.school}}</span>
                  <span class="position">{{edu.major}}</span>
                </div>
                <div class="info-description">
                  <span v-html="edu.description"
                        class="description">{{edu.description}}</span>
                </div>
              </div>
            </div>

            <!-- 工作经验渲染区域 -->
            <div v-if="item.itemName === 'experience'"
                 class="experience">
              <div v-for="(exp,index) in item.content"
                   :key=index
                   class="detail-item">
                <div class="info-header">
                  <span class="time">
                    {{exp.workTime[0]}} 至 {{exp.workTime[1]}}
                  </span>
                  <span class="location">{{exp.company}}</span>
                  <span class="position">{{exp.position}}</span>
                </div>
                <div class="info-description">
                  <span v-html="exp.description"
                        class="description">{{exp.description}}</span>
                </div>
              </div>
            </div>

            <!-- 项目经验渲染区域 -->
            <div v-if="item.itemName === 'program'">
              <div v-for="(pro,index) in item.content"
                   :key=index
                   class="detail-item">
                <div class="info-header">
                  <span class="time">
                    {{pro.programTime[0]}} 至 {{pro.programTime[1]}}
                  </span>
                  <span class="location">{{pro.progrom}}</span>
                  <span class="position">{{pro.position}}</span>
                </div>
                <div class="info-description">
                  <span v-html="pro.description"
                        class="description">{{pro.description}}</span>
                </div>
              </div>
            </div>

            <!-- 荣誉证书渲染区域 -->
            <div v-if="item.itemName === 'certificate'">
              <span v-html="item.content">{{item.content}}</span>
            </div>

            <!-- 自我评价渲染区域 -->
            <div v-if="item.itemName === 'evaluation'">
              <span v-html="item.content">{{item.content}}</span>
            </div>

          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: "resume1",
  data() {
    return {
      imageUrl: "http://static.500d.me/resources/500d/cvresume/images/1.jpg",
      avatarUploading: false
    };
  },

  computed: {
    primaryInfo() {
      return this.$store.state.primaryInfo;
    },
    preferenceItems() {
      return this.$store.state.resumeItems[0];
    },
    showItems() {
      return this.$store.getters.showItems;
    },
    resumeUpdateLoading() {
      return this.$store.state.resumeUpdateLoading;
    }
  },

  methods: {
    handleAvatarProgressing() {
      this.avatarUploading = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.avatarUploading = false;
    },
    beforeAvatarUpload(file) {
      this.avatarUploading = true;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        this.avatarUploading = false;
      }
      return isLt2M;
    },
    printResume() {
      this.$print(this.$refs.print_area);
    }
  }
};
</script>

<style lang='scss' scoped>
.wrapper {
  .personal-info {
    padding: 25px 25px;
    .avatar-wrapper {
      display: inline-block;
      .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 120px;
        height: 150px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
      }
      .avatar {
        width: 120px;
        height: 150px;
        display: block;
      }
    }
    .primary-info {
      display: inline-block;
      vertical-align: top;
      margin-left: 55px;
      line-height: 50px;

      .name {
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
  .detail {
    padding: 0 25px 0 100px;
    .detail-item {
      padding-bottom: 10px;
      .info-header {
        display: flex;
        justify-content: space-between;
        .time {
          align-self: flex-start;
        }
        .location {
          align-self: center;
        }
        .positoin {
          align-self: flex-end;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.detail {
  .el-timeline-item__wrapper {
    .el-timeline-item__timestamp {
      margin-bottom: 0;
      padding-top: 0;
      width: 100px;
    }
  }

  .is-top {
    margin-left: -140px;
    font-size: 20px;
    font-weight: bold;
    color: #254665;
  }
}
</style>

